<template>
  <div>
    <div style="padding-left:80px">
      <div style="margin-bottom: 10px;">{{qualityobj.remark}}</div>
      <el-checkbox-group
        v-model="checkedCities1">
        <el-checkbox v-for="city in cities" :label="city.value" :key="city.value" @change="checkChange">{{city.label}}
        </el-checkbox>
      </el-checkbox-group>


    </div>
    <div style="display: flex;height: 239px;" v-if="gaoVerify">
      <div class="checkbox-div" v-if="qaVerify">
<!--        <el-checkbox-group-->
<!--          v-model="qaContent">-->
<!--          <div v-for="item in qa" class="checkbox-two">-->
<!--            <el-checkbox :label="item.value" :key="item.value">{{item.label}}</el-checkbox>-->
<!--          </div>-->
<!--        </el-checkbox-group>-->
        <div style="overflow: hidden;width: 120px;margin-left: -17px">
          <div style="height: 220px;overflow-y: scroll;width: 120px;margin-left: 17px">
          <el-tree
            :data="data2"
            show-checkbox check-strictly="true"
            node-key="value"
            ref="tree"
            highlight-current
            :props="defaultProps">
          </el-tree>
        </div>
        </div>
      </div>
      <div style="margin-top: 20px;width: 110px;position:absolute;left:225px;" v-if="wsVerify">
        <el-checkbox-group
          v-model="wsContent">
          <div v-for="item in ws">
            <el-checkbox :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
    </div>
    <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: 20px">
      <el-button @click="close">关闭</el-button>
      <el-button type="danger" @click="onSubmit()">保存</el-button>
    </div>
    <!--      <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="margin-top: 20px">-->
    <!--        <el-form-item label="主题" class="form-items" prop="topic">-->
    <!--          <el-input v-model="form.topic" class="input-width"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="行动计划" class="form-items" prop="actionPlan">-->
    <!--          <el-input v-model="form.actionPlan" class="input-width"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="责任人" class="form-items">-->
    <!--          <el-input v-model="form.wener" class="input-width"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="完成时间" class="form-items">-->
    <!--          <el-date-picker-->
    <!--            v-model="form.dueDate"-->
    <!--            type="datetime"-->
    <!--            placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">-->
    <!--          </el-date-picker>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="备注" class="form-items">-->
    <!--          <el-input v-model="form.remark" style="width:525px"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item style="text-align: center;">-->
    <!--          <div style="margin-left: -80px">-->
    <!--            <el-button @click="close">关闭</el-button>-->
    <!--            <el-button type="danger" @click="onSubmit('form')">保存</el-button>-->
    <!--          </div>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
  </div>
</template>

<script>
  export default {
    name: "plan",
    props: {
      sendarr: {
        type: Array,
        default: []
      },
      types: {
        type: Number,
        default: 0
      },
      qualityobj:{
        type:Object,
        default:{}
      }
    },
    data() {
      return {
        checkedCities1: [],
        cities: [{label: "Teamroom", value: 22}, {
          label: "Workstation",
          value: 33
        }, {value: 44, label: 'Strategy Room'}],
        qaVerify: false,
        wsVerify: false,
        qaContent: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        data2: [{
          value: 1,
          label: '包装',
          children: [{value: 100,label: 'BL1'},{value: 47,label: 'BL2'},{value: 300,label: 'BL3'},{value: 400,label: 'BL4'},{value: 5,label: 'BL5'},{value: 6,label: 'BL6'},{value: 7,label: 'BL7'}]
        }, {label: "QA", value: 50}, {label: "酿造", value: 48},{
        label: "物流",
          value: 4
      }, {label: "动力", value: 6}],
        qa: [{label: "包装", value: 1},{label: "BL1", value: 100},{label: "BL2", value: 200},{label: "BL3", value: 300},{label: "BL4", value: 400},{label: "BL5", value: 500},{label: "BL6", value: 600},{label: "BL7", value: 1700}, {label: "QA", value: 50}, {label: "酿造", value: 48}, {
          label: "物流",
          value: 4
        }, {label: "动力", value: 6}],
        wsContent: [],
        ws: [{label: "BL2-洗瓶机", value: 7}, {label: "BL2-灌酒机", value: 8}, {label: "BL2-贴标机", value: 9}, {
          label: "BL2-码垛机",
          value: 10
        }],
        gaoVerify:false,
        form: {
          topic: '',
          actionPlan: '',
          wener: '',
          dueDate: '',
          remark: ''
        },
        rules: {
          topic: [
            {required: true, message: '请输入主题', trigger: 'blur'},
          ],
          actionPlan: [
            {required: true, message: '请输入行动计划', trigger: 'blur'},
          ],
        }
      };
    },
    methods: {
      checkChange(e) {
        let that = this;
        let arr = that.checkedCities1;
        if (!arr.length) {
          that.wsVerify = false;
          that.wsContent = [];
          that.qaVerify = false;
          that.qaContent = [];
        }
        if (arr.indexOf(22) != -1 && arr.indexOf(33) != -1) {
          that.qaVerify = true;
          that.wsVerify = true;
          that.gaoVerify = true;
        }
        if (arr.indexOf(22) === -1 && arr.indexOf(33) === -1) {
          that.gaoVerify = false;
        }
        if (arr.indexOf(22) != -1) {
          that.qaVerify = true;
          that.gaoVerify = true;
        }
        if (arr.indexOf(33) != -1) {
          console.log(123);
          that.wsVerify = true;
          that.gaoVerify = true;
        }
        if (arr.indexOf(22) == -1) {
          that.qaVerify = false;
          that.qaContent = [];
        }
        if (arr.indexOf(33) == -1) {
          console.log(123);
          that.wsVerify = false;
          that.wsContent = [];
        }
      },
      close() {
        this.$emit("closePlan", false)
      },
      onSubmit(formName) {
        let that = this;
        let arr = [];
        let trees = that.$refs.tree.getCheckedKeys()
        trees.forEach(function (n) {
          arr.push(n)
        })
        that.qaContent.forEach(function (n) {
          arr.push(n)
        })
        that.wsContent.forEach(function (n) {
          arr.push(n)
        })
        // 0是质量优先项 1是线重点关注
        if (that.types === 0) {
          console.log(0);
          console.log(that.qualityobj);
          let arrs=[]
          arr.forEach(function (n) {
            arrs.push({qualityId:that.qualityobj.qualityId,belong:n})
          })
          that.$post('pi/data/quality/send', arrs)
            .then((response) => {
              if(response.resultCode === "1"){
                that.$message({
                  message: "发送成功",
                  type: 'success'
                });
              }else{
                that.$message.error(response.msg);
              }
              that.$emit("onSubmit", false)
            }).catch(err => {
            that.$message.error(err);
          })
        } else {
          let form = that.form;
          let sendarrs = []
          // console.log(that.sendarr)
          // console.log(arr);
          that.sendarr.forEach(function(n){
            arr.forEach(function(s){
              sendarrs.push({actionPlan:n.actionPlan,belong:s,dueDate:n.dueDate,id:n.id,remark:n.remark,topic:n.topic,wener:n.wener})
            })
          })
          console.log("sendarrs",sendarrs);

          that.$post('pi/spots/inner/send', sendarrs)
            .then((response) => {
              this.$message({
                message: response.msg,
                type: 'success'
              })
              that.$emit("onSubmit", true)
            }).catch(err => {
            that.$message.error(err);
          })
          // for (let i = 0; i < that.sendarr.length; i++) {
          //   sendarrs.push({
          //     actionPlan: that.sendarr[i].actionPlan,
          //     dueDate: that.sendarr[i].dueDate,
          //     remark: that.sendarr[i].remark,
          //     topic: that.sendarr[i].topic,
          //     wener: that.sendarr[i].wener,
          //     id:that.sendarr[i].id
          //   })
          // }
          // let obj = {
          //   belong: arr,
          //   hotSpots: sendarrs,
          // }
          // let objs = [];
          // for(let i = 0;i < sendarrs.length;i++){
          //   for(let s = 0;s < arr.length;i++){
          //
          //   }
          // }
        }

      },
    }
  }
</script>

<style scoped>
  .input-width {
    width: 220px;
  }

  .form-items {
    display: inline-block;
  }

  .el-form-item__label {
    text-align: left;
  }
  .checkbox-div{
    margin-top: 20px;
    position:absolute;
    left:105px;
    width: 110px;
    height: 300px;
  }
  .checkbox-two:nth-child(2),.checkbox-two:nth-child(3),.checkbox-two:nth-child(4),.checkbox-two:nth-child(5),.checkbox-two:nth-child(6),.checkbox-two:nth-child(7),.checkbox-two:nth-child(8){
    margin-left: 10px;
  }
</style>
